<template>
    <div id="app">
        <div class="section">
            <div class="swiper-container"
                 ref="slider">

                <div class="swiper-wrapper">
                    <div v-for="s in slides" class="swiper-slide">
                        <img :src="s.img_url"/>
                        <!--<img src="./fixtures/sliders/t1.svg"/>-->
                    </div>

                </div>

                <div class="swiper-pagination"ref="pagination"></div>
            </div>
            <div class="announcement">
                <label>快讯</label>
                <span>{{announcement}}</span>
            </div>
            </div>

        <div class="section">
            <div class="book-list">
                <div class="header">
                <div class="heading">最新更新</div>
                <div class="more">更多...</div>
                </div>
            </div>
            <div class="book-items">
                <div class="book"v-for="book in books">
                    <div @click="$emit('haha')" class="cover"><img :src="book.img_url"/></div>
                    <div class="title">{{book.title}}</div>
                    <div class="authors">{{book.authors|join}}</div>
                </div>
            </div>
        </div>
            <div class="section">
            </div>
        </div>
</template>

<script type="text/ecmascript-6">
    import Swiper from "swiper"
    import 'swiper/dist/css/swiper.css'
    import "./list.less"
    //import slider from './slider.vue'
    import booklist from "./list.vue"
 //   import  "./list.vue"

    export default{
        components: {/*slider,*/ booklist}
        ,data(){
          return {
              announcement:''
              ,slides:[]
              ,books:[]
        }
        }
        ,prop:[
            'heading',
            'books'
        ]
        ,filters:{
            join(args){
                return args.join(',')
            }
        }

        ,methods:{
            xxx(){
                window.alert('zx23333');
            }
        }
    }
</script>
